<template>
  <div class="zj-swiper">
    <el-carousel :interval="4000" :autoplay="true" type="card" height="200px">
      <el-carousel-item
        v-for="(item, index) in swipers"
        :key="index"
        id="img-el"
      >
        <div class="tt">
          <el-image
            @click="changeUrl(item)"
            :src="$filters.formatImgSize(item[`${imgSrc}`], 420, 200)"
            fit="contain"
            style="height: 100%"
          >
          </el-image>
          <!-- <img
            @click="changeUrl(item)"
            :src="$filters.formatImgSize(item[`${imgSrc}`], 420, 200)"
            style="height: 100%; object-fit: contain; vertical-align: top"
          /> -->
          <el-tag
            :type="item.typeTitle === '独家' ? 'danger' : 'success'"
            effect="dark"
            style="
              position: absolute;
              top: 76%;
              right: 0 !important;
              border-radius: 10px 0 0 10px;
              height: 19px;
              line-height: 17px;
            "
            >{{ item.typeTitle }}</el-tag
          >
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { useStore } from 'vuex'
import { TSwiper } from '../type'

export default defineComponent({
  props: {
    swipers: {
      // type: Array as PropType<TSwiper[]>,
      type: Array as any,
      default: () => []
    },
    imgSrc: {
      type: String,
      default: 'imageUrl'
    }
  },
  setup() {
    const store = useStore()
    const changeUrl = (row: any) => {
      row.id = row.targetId
      row.index = 0
      store.dispatch('music/playMusic', row)
    }
    return {
      changeUrl
    }
  }
})
</script>

<style>
.zj-swiper {
  width: 90%;
  margin: 0 auto;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.tt {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: right;
}
</style>
